<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :class="{'global-mobile-dialog':showMobilePage}"
    :lock-scroll="false"
    :modal-append-to-body="false"
    class="subcribe-common-dialog small-common-dialog-size dialog-container"
  >
    <DialogTitle title="请选择需要设置的签约状态" font-size="16px" style="margin-bottom:20px;"/>
    <el-radio-group v-model="signStatus" class="radio-group">
      <el-radio :label="0">未签约</el-radio>
      <el-radio :label="1">已签约</el-radio>
      <el-radio :label="-1">已解约</el-radio>
    </el-radio-group>
    <div class="dialog-footer">
      <el-button :disabled="!signStatusIsSet || loading" class="ok" type="primary" @click="handleConfirm">确定</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import DialogTitle from '@/components/Title';

export default {
  name: 'SetSignStatus',
  components: {
    DialogTitle
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      signStatus: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    signStatusIsSet() {
      return this.signStatus || this.signStatus === 0;
    }
  },
  methods: {
    initDialog() {
      this.signStatus = null;
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$emit('signStatusChange', this.signStatus);
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  .radio-group {
    margin-left: 10px;
    &::v-deep {
      .el-radio, .el-radio__label {
        font-size: 14px;
      }
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
</style>
